<template>
  <header class="main">
    <i class="resume resume-logo" @click="toHome" />
    <span>我的简历</span>
    <div>
      <r-button @click="saveResume" size="small">保存</r-button>
      <r-button @click="downloadResume" size="small">下载</r-button>
    </div>
  </header>
</template>

<script>
import RButton from "../base/RButton";
import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";

const toPdf = (dom) => {
  html2canvas(dom, {
    allowTaint: true,
    backgroundColor: "white",
    useCORS: true, // 允许CORS跨域
  }).then((canvas) => {
    let url = canvas.toDataURL("image/png", 1);
    // eslint-disable-next-line new-cap
    let pdf = new jsPDF("", "px", "a4");
    pdf.addImage(url, "png", 0, 0, 410, 580);
    pdf.save("test.pdf");
  });
};
export default {
  name: "RHeader",
  components: {
    RButton,
  },
  props: {
    mainEl: Object,
  },
  setup(props) {
    const saveResume = () => {
      // this.$store.commit('SAVE_DATA', {template: this.template})
    };
    const downloadResume = () => toPdf(props.mainEl);
    const toHome = () => {};
    return {
      saveResume,
      downloadResume,
      toHome,
    };
  },
};
</script>

<style scoped lang="less">
header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  box-sizing: border-box;
  padding: 0 20px;
  z-index: 90;
  box-shadow: 0 2px 5px lightgrey;

  i {
    color: lightskyblue;
    height: 25px;
    cursor: pointer;
  }
}
</style>
